<template>
  <div>
    <el-card class="member-box-card">
      <el-input id="input-field" v-model="search" size="mini" placeholder="输入部门名称进行搜索"/>
      <el-table id="member-table" ref="memberTable" :key="itemKey" v-loading="loading"  border height="700"
                style="width: 100%" :data="searchHandler()" max-height="450" >

        <el-table-column prop="department" label="部门名称" width="120"/>
        <el-table-column prop="acceptId" label="编号/流水号"  width="120" />
        <el-table-column prop="provider" label="供货单位" width="120"/>
        <el-table-column prop="invoice" label="发票号" width="120"/>
<!--        <el-table-column prop="contract" label="合同号" width="120"/>-->
        <el-table-column prop="place" label="到货地点" width="120"/>
        <el-table-column prop="status" label="验收情况" width="120"/>
        <el-table-column prop="createtime" label="创建时间" width="120"/>
        <el-table-column prop="id" label="序号"  width="60"/>
        <el-table-column align="right"  fixed="right" width="180">
          <template slot="header" slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleInsert(scope.$index, scope.row)"
            >添加</el-button>
          </template>
          <template slot-scope="scope">
            <el-button size="mini"
              @click="handleEdit(scope.$index, scope.row)"
            >修改</el-button>
            <el-button size="mini" type="danger"
              @click="handleStatus(scope.$index, scope.row)"
            >验收完成</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!--编辑弹窗-->
    <el-dialog title="修改验收信息" :visible.sync="editFormVisible" :before-close="handleEditClose" width="40%">
      <el-form class="action-form" :model="updForm" label-width="100px">
<!--        <el-form-item label="序号">-->
<!--          <el-input :placeholder="updForm.id" :disabled="true" />-->
<!--        </el-form-item>-->
        <el-form-item label="流水号">
          <el-input v-model="updForm.acceptId" :disabled="true" />
        </el-form-item>
        <el-form-item label="部门名称">
<!--          <el-input v-model="updForm.department" />-->
          <el-select v-model="updForm.department" placeholder="请选择部门">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="供货单位">
<!--          <el-input v-model="updForm.provider" />-->
          <el-select v-model="updForm.provider" placeholder="请选择供应商">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发票号">
          <el-input v-model="updForm.invoice" />
        </el-form-item>
        <el-form-item label="到货地点">
          <el-input v-model="updForm.place" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updFormCancel()">取 消</el-button>
        <el-button type="primary" @click="updFormConfirm()">确 定</el-button>
      </div>
    </el-dialog>
    <!--添加弹窗-->
    <el-dialog title="新建验收" :visible.sync="insFormVisible" :before-close="handleInsClose" width="40%">
      <el-form class="action-form" :model="insForm" label-width="100px">
        <el-form-item label="部门名称">
<!--          <el-input v-model="insForm.insdepartment" />-->
          <el-select v-model="insForm.insdepartment" placeholder="请选择部门">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="供货单位">
<!--          <el-input v-model="insForm.insprovider" />-->
          <el-select v-model="insForm.insprovider" placeholder="请选择供应商">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发票号">
          <el-input v-model="insForm.insinvoice" />
        </el-form-item>
        <el-form-item label="到货地点">
          <el-input v-model="insForm.insplace" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="insFormCancel()">取 消</el-button>
        <el-button type="primary" @click="insFormConfirm()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {selectAllAccept, selectByNot, selectByStatus, addAccept, editAccept, editStatus} from '@/api/entrywarehouse/accept-inform'
  import { selectAllProvider } from '@/api/system-management/supplier-management'
  import { selectAllDepartment } from '@/api/system-management/department-management'
  import { getToken } from '@/utils/auth'


  export default {
    name: 'index',
    data() {
      return {
        tableData: [],
        options1: [],
        options2: [],
        search: '',
        itemKey: '',
        loading: false,
        editFormVisible: false,
        insFormVisible: false,
        updForm: {
          id: '',
          index: '',
          acceptId: '',
          department: '',
          provider: '',
          invoice: '',
          place: '',
          contract: '',
          status: '',
          createtime: ''
        },
        insForm: {
          insdepartment: '',
          insprovider: '',
          insinvoice: '',
          insplace: ''
        },
        headers: {
          Authorization: getToken()
        }
      }
    },
    created() {
      this.init()
    },
    methods: {
      init() {
        selectByNot().then((response) => {
          this.tableData = response.data
        })

        selectAllProvider().then((response2) => {
          for(let i = 0; i < response2.data.length ; i++){
            // this.options2.push({'label':response.data[i].name, 'value': response.data[i].name})
            let b = {value: '',label: ''}
            b.value = response2.data[i].name
            b.label = response2.data[i].name
            this.options2.push(b)
          }
          console.log(this.options2)
        })

        selectAllDepartment().then((response1) => {
          for(let i = 0; i < response1.data.length ; i++){
            let a = {value: '',label: ''}
            a.value = response1.data[i].departName
            a.label = response1.data[i].departName
            this.options1.push(a)
            //this.options1.push({'label':response.data[i].departName, 'value': response.data[i].departName})
          }
          console.log(this.options1)
        })

      },
      searchHandler() {
        return this.tableData.filter(data => !this.search || data.department.toLowerCase().includes(this.search.toLowerCase()))
      },
      handleEdit(index, row) {
        this.editFormVisible = true
        this.updForm.index = index
        this.updForm.id = row.id
        this.updForm.acceptId = row.acceptId
        this.updForm.department = row.department
        this.updForm.provider = row.provider
        this.updForm.invoice = row.invoice
        this.updForm.place = row.place
        this.updForm.contract = ''
        this.updForm.status = row.status
        this.updForm.createtime = row.createtime

      },
      updFormConfirm() {
        this.editFormVisible = false
        editAccept(
          this.updForm.id,
          this.updForm.department,
          this.updForm.acceptId,
          this.updForm.provider,
          this.updForm.contract,
          this.updForm.place,
          this.updForm.invoice,
          this.updForm.status,
          this.updForm.createtime
        ).then((response) => {
          this.$message.success(response.message)
          this.loading = true
          selectByNot().then((response) => {
            this.tableData = response.data
            this.loading = false
            this.itemKey = Math.random()
          })
          this.updForm.id = ''
          this.updForm.acceptId = ''
          this.updForm.department = ''
          this.updForm.provider = ''
          this.updForm.invoice = ''
          this.updForm.place = ''
          this.updForm.contract = ''
          this.updForm.status = ''
          this.updForm.createtime = ''
        }).catch((error) => {
          console.log(error)
        })
      },
      updFormCancel() {
        this.editFormVisible = false
        this.updForm.id = ''
        this.updForm.acceptId = ''
        this.updForm.department = ''
        this.updForm.provider = ''
        this.updForm.invoice = ''
        this.updForm.place = ''
        this.updForm.contract = ''
        this.updForm.status = ''
        this.updForm.createtime = ''
      },
      handleEditClose() {
        this.editFormVisible = false
        this.updForm.id = ''
        this.updForm.acceptId = ''
        this.updForm.department = ''
        this.updForm.provider = ''
        this.updForm.invoice = ''
        this.updForm.place = ''
        this.updForm.contract = ''
        this.updForm.status = ''
        this.updForm.createtime = ''
      },

      handleInsert(index, row) {
        this.insFormVisible = true
      },
      insFormConfirm() {
        if (this.insForm.insdepartment === '' || this.insForm.insprovider === '' || this.insForm.insinvoice === '' || this.insForm.insplace === '') {
          this.$message.error('信息不能为空')
        } else {
          addAccept(this.insForm.insdepartment, this.insForm.insprovider, this.insForm.insinvoice, this.insForm.insplace).then(response => {
            this.$message.success('新建成功')
            this.insFormVisible = false
            this.loading = true
            selectByNot().then((response) => {
              this.tableData = response.data
              this.loading = false
              this.itemKey = Math.random()
            })
            this.insForm.insdepartment = ''
            this.insForm.insprovider = ''
            this.insForm.insinvoice = ''
            this.insForm.insplace = ''
          })
        }
      },
      insFormCancel() {
        this.insFormVisible = false
        this.insForm.insdepartment = ''
        this.insForm.insprovider = ''
        this.insForm.insinvoice = ''
        this.insForm.insplace = ''
      },
      handleInsClose() {
        this.insFormVisible = false
        this.insForm.insdepartment = ''
        this.insForm.insprovider = ''
        this.insForm.insinvoice = ''
        this.insForm.insplace = ''
      },

      handleStatus(index, row){
        this.$confirm('请确认好验收已完成, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          editStatus(row.id, row.department, row.acceptId, row.provider, this.updForm.contract , row.place, row.invoice, row.status,
            row.createtime).then((response) => {
            this.$message.success(response.message)
            this.loading = true
            selectByNot().then((response) => {
              this.tableData = response.data
              this.loading = false
              this.itemKey = Math.random()
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      }
    }
  }
</script>

<style >
  .member-box-card {
    width: 95%;
    margin: 20px auto;
  }
  #input-field {
    width: 200px;
    display: inline;
  }
  #member-table {
    margin-top: 5px;
  }
  .action-form {
    width: 400px;
  }
</style>
